<template>
  <div class="chat-view-list-box">
    <div class="message-box" v-for="(item,index) in messageList" :key="item.id"
         :class="{rightmassage: item.userId!==user.id,animationClass} ">
      <div class="message-item">
        <div class="user-box">
          <div class="nickname">
            <span>{{ item.nickname }}</span>
            <span>{{ item.creationTime }}</span>
          </div>
          <div class="img-box">
            <img :src="item.imgUrl">
          </div>
        </div>
        <div class="content">
          <div class="content-box">
            <div class="img-list" v-if="item.type==='img'">
              <div class="img-item" v-for="(img,index) in item.conversation" :key="index">
                <div id="ExportDivImg">
                  <img :src="img.url">
                </div>
                <!--                <div class="img-download" @click="imgDownload(img.url)">-->
                <!--                  <el-tooltip class="img-download-item" effect="dark" content="下载图片" placement="right">-->
                <!--                    <div class="img-icon">-->
                <!--                      <i class="el-icon-download" style="color: black;font-size: 25px"></i>-->
                <!--                    </div>-->
                <!--                  </el-tooltip>-->
                <!--                </div>-->

              </div>
            </div>
            <span v-else>
             {{ item.conversation }}
            </span>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {
  contentTypeit
} from '@/views/BlogFront/utils/plug'
import {ExportImgElement, ExportImg} from "@/utils/Export2Image";

export default {
  name: "chat-aipainting-view-list",
  data() {
    return {
      messageList: [
        // {
        //   userId: "-1",
        //   nickname: "AI绘画🎨",
        //   imgUrl: require("../../assets/chat/AiPainting.png"),
        //   conversation: [{
        //     url: 'https://oaidalleapiprodscus.blob.core.windows.net/private/org-vhmA02nhWdP2ZHydmsupV2V1/user-HuXW17J1e674DZXfTREWqnp2/img-Mw3BKcAzP79xmQfMGwSPKVqR.png?st=2023-06-05T11%3A50%3A44Z&se=2023-06-05T13%3A50%3A44Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-06-05T05%3A32%3A03Z&ske=2023-06-06T05%3A32%3A03Z&sks=b&skv=2021-08-06&sig=raLx9QyI/4gNiPejkc8uygN5GQHxzxJo0wdQFbIsYRo%3D'
        //   }
        //   ],
        //   type: 'img',
        //   creationTime: new Date().toLocaleString()
        // }
      ],
      animationClass: "",
      animationId: "",
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    sendMessage(item) {
      this.messageList.push(item);
      this.chatgptRes(item.conversation)
    },
    chatgptRes(conversation) {
      this.request.get("/ChatAPI/AiPainting", {
        params: {
          prompt: conversation
        }
      }).then(res => {
        this.$emit('clearLoad');
        console.log("ai绘画", res)
        let ChatGptObject = {
          userId: "-1",
          nickname: "AI绘画🎨",
          imgUrl: require("../../assets/chat/AiPainting.png"),
          conversation: res.data,
          type: "img",
          creationTime: new Date().toLocaleString()
        }
        // this.contentText(ChatGptObject);
        console.log("chatgpt返回的数据", ChatGptObject)
        this.messageList.push(ChatGptObject)
        this.$emit("scrollbarBT");
        //更新到vuex
        this.$store.state.AiPaintingMessageList= this.messageList;
      })

    },
    imgDownload(imgSrc) {
      let element = document.querySelector('#ExportDivImg');
      // ExportImgElement(element,'ai','png')
      ExportImg(imgSrc);
    },
    contentText(messageItem) {
      var timer = setTimeout(() => {
        contentTypeit("#contentspan", messageItem.conversation); //打字机效果
        clearTimeout(timer);
      }, 1500);
    }
  },
  //生命周期 一 创建完成(可以访问当前this实例)
  created() {
    //查看当前vuex中有没有历史数据
    this.messageList = this.$store.state.AiPaintingMessageList

  },
  //生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {

  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style lang="less" scoped>
.chat-view-list-box {
  width: 100%;
  height: 100%;

  .message-box {
    width: 100%;
    display: flex;
    justify-content: flex-end;


    .message-item {
      width: auto;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;

      .user-box {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-grow: 0;

        .nickname {
          font-size: 15px;
          color: white;

          span {
            margin-right: 10px;
          }
        }

        .img-box {
          width: 45px;
          height: 45px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
      }

      .content {
        margin-top: 15px;
        display: flex;
        justify-content: flex-end;

        .content-box {
          display: inline-block;
          max-width: 1200px;
          padding: 15px 15px;
          background: #409eff;
          font-size: 17px;
          color: white;
          font-weight: 500;
          border-radius: 15px 1px 15px 15px;

          .img-list {
            .img-item {
              position: relative;

              .img-download {
                position: absolute;
                bottom: 30px;
                right: -80px;

                .img-download-item {
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  background: white;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  .img-icon {
                    width: 50px;
                    height: 50px;

                    border-radius: 50%;

                  }
                }
              }
            }
          }

          span {
            line-height: 25px;
            letter-spacing: 1px;
            white-space: pre-line;
            word-wrap: break-word;
          }

        }


      }
    }


  }

  .rightmassage {
    justify-content: flex-start !important;

    .message-item {
      .user-box {
        justify-content: flex-start;

        .img-box {
          order: -1;
        }
      }

      .content {
        justify-content: flex-start !important;

        .content-box {
          border-radius: 1px 15px 15px 15px !important;
          background: #393c4b !important;
        }


      }

    }
  }


}


/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

/*the animation definition*/
@-webkit-keyframes bounceInUp {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0)
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0)
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0)
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0)
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

@keyframes bounceInUp {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    -ms-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0)
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    -ms-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0)
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    -ms-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0)
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    -ms-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0)
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp
}


/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

/*the animation definition*/
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp
}


</style>